<template>
    <div class="input-link">
        <el-input :placeholder="placeholder" clearable v-model="inputValue" readonly>
            <el-button slot="append" @click.stop="linkVisible = true">生成链接地址</el-button>
        </el-input>
        <el-dialog title="生成链接地址" append-to-body
                   :visible.sync="linkVisible"
                   width="600px">
            <el-form ref="form" :model="details" label-width="80px">
                <el-form-item label="链接类型">
                    <el-radio-group v-model="details.type">
                        <el-radio :label="1" border>链接地址</el-radio>
                        <el-radio :label="2" border>小程序</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="链接地址" v-if="details.type === 1">
                    <el-input v-model="details.text" placeholder="例如：/pages/index/index 或 网页地址"></el-input>
                </el-form-item>
                <el-form-item label="APPID" v-if="details.type === 2">
                    <el-input v-model="details.appid" placeholder="在小程序后台，开发管理->开发设置"></el-input>
                </el-form-item>
                <el-form-item label="页面地址" v-if="details.type === 2">
                    <el-input v-model="details.text" placeholder="例如：/pages/index/index"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" class="dialog-footer">
                <el-button @click="linkVisible = false">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
              </span>
        </el-dialog>
    </div>
</template>
<script>
export default {
    name: "InputLink",
    model: {
        prop: 'value',
        event: 'change'
    },
    props: {
        value: {
            type: [String, Array],
            default: () => ''
        },
        placeholder: {
            type: String,
            default: ''
        }
    },
    watch: {
        value: {
            immediate: true,
            deep: false,
            handler() {
                this.inputValue = this.value
                if (this.inputValue.indexOf("miniProgram") >= 0) {
                    let arr = this.value.split(":")
                    this.$set(this.details, "appid", arr[1])
                    this.$set(this.details, "text", arr[2])
                    this.$set(this.details, "type", 2)
                }else{
                    this.$set(this.details, "text", this.value)
                    this.$set(this.details, "type", 1)
                }
            }
        }
    },
    data() {
        return {
            inputValue: '',
            linkVisible: false,
            details: {
                type: 1
            }
        }
    },
    methods: {
        confirm() {
            let linkText = "";
            if (this.details.type === 1)
                linkText = this.details.text
            if (this.details.type === 2) {
                linkText = `miniProgram:${this.details.appid}:${this.details.text}`
            }
            this.inputValue = linkText;
            this.$emit('change', linkText)
            this.$emit('input', linkText)
            this.$emit('update:model', linkText)
            this.linkVisible = false;
        }
    }
}
</script>

<style scoped>

</style>
